{% load i18n static common %}
<div style="padding: 10px;min-height: 300px;min-width: 1000px">
  <form class="layui-form action-form" action method="post" id="{{ model_name }}_{{ action_repr }}">
        {% csrf_token %}
        <div class="layui-form-item field-import_file">
            <label class="layui-form-label" for="id_import_file">{% trans 'data_import_labelFile' %}</label>
            <div class="layui-input-inline ">
                <input type="file" name="import_file" lay-data="{accept: 'file'}" required="" id="id_import_file">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block layui-form-mid layui-word-aux">{% trans 'data_import_fileHelpTxt' %}</div>
            </div>
            <div class="layui-form-item layui-hide">
                <input  name="company_id" value="{{ request.GET.company_id }}" id="id_company_id">
            </div>
        </div>
       <div class="layui-form-item layui-hide">
            <label class="layui-form-label">{% trans 'date_import_labelExistingData' %}</label>
            <div class="layui-input-inline">
                <select name="import_type" id="id_import_type" autocomplete="off">
                    <option value="0" selected="">{% trans 'date_import_typeOptionIgnore' %}</option>
                    <option value="1">{% trans 'date_import_typeOptionOverwrite' %}</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
              {% layui_inline form.form.cycle_unit %}
              {% layui_inline form.form.shift_cycle %}
                <style>
                  .field-cycle_unit label{
                      width: 81px !important;
                      min-width: 0px!important;
                      max-width: 81px!important;
                  }
                  .field-shift_cycle label{
                      width: 81px!important;
                      min-width: 0px!important;
                      max-width: 81px!important;
                  }
                </style>
            </div>
        <div class="layui-form-item">
            <label class="layui-form-label"
                   style="width: 150px;text-align: left">{% trans 'data_import_fileTemplateDemo' %}</label>
            <div class="layui-input-inline" style="float: right">
                <a id="attshift_import_link" target="_blank" style="color: #01AAED;"
                   href="att/attshift/import_template/"><i
                        class="fa fa-download"></i>{% trans 'data_import_fileTemplateDownload' %}</a>
            </div>
        </div>
        <div class="layui-form-item">
            <table class="layui-hide" id="demo"></table>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block"
                 style="margin-left: 0px;min-height: 24px;">{% trans 'data_import_description' %}</div>
            <div class="layui-input-block" style="margin-left: 20px;">
                <p>{% trans 'data_import_attshiftImportRequired1' %}</p>
                <p>{% trans 'data_import_attshiftImportRequired2' %}</p>
                <p>{% trans 'data_import_attshiftImportRequired3' %}</p>
                <p>{% trans 'data_import_attshiftImportRequired4' %}</p>
            </div>
        </div>
    </form>
</div>
<script>
  layui.use('table', function () {
    var table = layui.table, form = layui.form;
    var normal_timetable = {
      elem: '#demo'
      , cols: [[
        {field: 'no', width: '10%', title: ''}
        , {field: 'alias', width: '10%', title: 'A'}
        , {field: 'auto_shift', width: '10%', title: 'B'}
        , {field: 'week_1', width: '10%', title: 'C'}
        , {field: 'week_2', width: '10%', title: 'D'}
        , {field: 'week_3', width: '10%', title: 'E'}
        , {field: 'week_4', width: '10%', title: 'F'}
        , {field: 'week_5', width: '10%', title: 'G'}
        , {field: 'week_6', width: '10%', title: 'H'}
        , {field: 'week_7', width: '10%', title: 'I'}
      ]]
      , data: [{
        "no": "1"
        , "alias": "{% trans 'attShift_field_alias' %}"
         , "auto_shift": "{% trans 'attShift_field_autoShift' %}"
        , "week_1": "{% trans 'shiftDetail_field_timeInterval' %}"
        , "week_2": "{% trans 'shiftDetail_field_timeInterval' %}"
        , "week_3": "{% trans 'shiftDetail_field_timeInterval' %}"
        , "week_4": "{% trans 'shiftDetail_field_timeInterval' %}"
        , "week_5": "{% trans 'shiftDetail_field_timeInterval' %}"
        , "week_6": "{% trans 'shiftDetail_field_timeInterval' %}"
        , "week_7": "{% trans 'shiftDetail_field_timeInterval' %}"
      }, {
        "no": "2"
       , "alias": "CDMX Shift 1"
        , "auto_shift": "1"
        , "week_1": "{% trans 'flexible_default_name' %}"
        , "week_2": "{% trans 'flexible_default_name' %}"
        , "week_3": "{% trans 'flexible_default_name' %}"
        , "week_4": "{% trans 'flexible_default_name' %}"
        , "week_5": "{% trans 'flexible_default_name' %}"
        , "week_6": "{% trans 'flexible_default_name' %}"
        , "week_7": "{% trans 'flexible_default_name' %}"
      }, {
        "no": "3"
        , "alias": "CDMX Shift 2"
          , "auto_shift": "0"
        , "week_1": "{% trans 'timeinterval_default_name' %}"
        , "week_2": "{% trans 'timeinterval_default_name' %}"
        , "week_3": "{% trans 'timeinterval_default_name' %}"
        , "week_4": "{% trans 'timeinterval_default_name' %}"
        , "week_5": "{% trans 'timeinterval_default_name' %}"
        , "week_6": "{% trans 'timeinterval_default_name' %}"
        , "week_7": "{% trans 'timeinterval_default_name' %}"
      }]
    };
    var _url = "att/attshift/import_template/";
    $("#id_cycle_unit").attr('lay-filter','cycleUnit');
    cycleUnitChange();
    table.render(normal_timetable);
    $("#id_shift_cycle").change(function () {
        cycleUnitChange();
    });
    form.on('select(cycleUnit)', function (data) {
        cycleUnitChange();
    });
    function cycleUnitChange() {
         var unit = $("#id_cycle_unit").val();
         var cycle = $("#id_shift_cycle").val();
         $('#attshift_import_link')[0].href = _url+'?unit='+unit + '&cycle='+cycle;
    }
  });
</script>